<template>
	<div style="width: 100%;height: 100%;">
		<div id="china-map" class="map-box"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import JSON from '../mapJson/china.json';
	import dataGeo from '../js/china_geo.js'
	import {
		e_macarons
	} from '../js/macarons';
	export default {
		name: "Index",
		data() {
			return {
				mapOption: {

				}
			}
		},
		methods: {
			initMap(dataGeo, lineData) {
				this.mapOption = {
					color: ['#5470c6'],
					tooltip: {
						trigger: 'item',
						renderMode: 'html',
						triggerOn: 'click', // 触发方式
						enterable: true,
						backgroundColor: '#fff',
						padding: 0,
						textStyle: {
							color: '#000',
							fontSize: '12'
						},
						extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
					},
					dispatchAction: {
						type: 'downplay'
					},
					roam: true,
					roamController: {
						show: true,
						x: 'right',
						mapTypeControl: {
							china: true
						}
					},
					layoutSize: '120%',
					series: [{
							name: '',
							type: 'scatter',
							coordinateSystem: 'geo',
							color: ['#000'],
							tooltip: {
								position: "right",
								color: "#000",
								formatter(d) {
									console.log(d)
									return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
								},
							},
							data: dataGeo,
						},
						{
							name: "航线",
							type: "lines",
							zlevel: 6,
							lineStyle: {
								type: 'solid',
								width: 1,
								opacity: 1,
								curveness: 0,
								orient: 'horizontal',
								color: "#000",
							},
							show: true,
							data: lineData,
							tooltip: {
								position: "right",
								color: "#000",
								formatter(d) {
									console.log(d)
									return `<div style="padding: 5px 10px;"> 【${d.data.point[0]}】< ---- >【${d.data.point[1]}】</div>`;
								},
							},
						},
					],
					geo: {
						show: true,
						map: 'chiana',
						type: 'map',
						mapType: 'china',
						zoom: 1, //当前视角的缩放比例
						roam: true, //是否开启平游或缩放
						scaleLimit: { //滚轮缩放的极限控制
							min: 1,
							max: 10
						},
						label: {
							normal: {
								show: false, // 显示省份标签
								textStyle: {
									color: '#fff',
									fontSize: 10
								}
							},
							emphasis: {
								// 对应的鼠标悬浮效果
								show: true,
								// 选中后的字体样式
								textStyle: {
									color: '#000',
									fontSize: 14
								}
							}
						},
						itemStyle: {
							color: '#ddb926',
							normal: {
								areaColor: '#8abcd1',
								borderColor: '#fff',
								borderWidth: 1
							},
							emphasis: {
								borderWidth: 0.5,
								borderColor: '#8abcd1',
								areaColor: '#fff'
							}
						},
						emphasis: {
							label: {
								show: false
							}
						}
					}
				}
			},
			drawMap(data) {
				let mapPointData = []
				let lineData = []
				let city = []
				data.forEach((item) => {
					city.push(item.startCity)
					city.push(item.endCity)
				})
				city = [...new Set(city)]
				console.log(city)
				city.forEach((item) => {
					Object.keys(dataGeo).forEach(function(key) {
						if (item == key) {
							let params = {
								name: key,
								value: [dataGeo[key].x, dataGeo[key].y]
							}
							mapPointData.push(params)
						}
					});
				})
				let start = {}
				let end = {}
				let line = {}
				data.forEach((item) => {
					Object.keys(dataGeo).forEach(function(key) {
						if (item.startCity == key) {
							start = {
								name: key,
								value: [dataGeo[key].x, dataGeo[key].y]
							}
						}

						if (item.endCity == key) {
							end = {
								name: key,
								value: [dataGeo[key].x, dataGeo[key].y]
							}
						}
					});
					line = {
						point: [start.name, end.name],
						coords: [
							start.value,
							end.value
						],
					}
					lineData.push(line)
				})

				this.initMap(mapPointData, lineData)
				echarts.registerMap('chiana', JSON, {});
				const myChart = echarts.init(
					document.getElementById('china-map'),
					e_macarons
				);
				myChart.setOption(this.mapOption);
				window.addEventListener('resize', () => {
					myChart.resize();
				});
			},
			initData() {
				return this.$axios.post("http://localhost:8888/route/getList", {})
			},

		},
		async mounted() {
			let response = await this.initData()
			console.log(response)
			this.drawMap(response.data)
		}
	}
</script>

<style>
	.map-box {
		width: 100%;
		height: calc(100% - 5px);
		border: 1px solid #d4c4b7;
	}
</style>
